<template>
	<view id="WorkOrderCompleted">
		<view class="WorkOrderCompleted_Content">
			<view class="public_title">
				<text>A栋6楼报修啦</text>
				<uni-icons type="search"></uni-icons>
				<text>已完成</text>
			</view>
			<view class="public_item">
				<text>工单编号</text>
				<text>{{'No.'+all._id?.slice(-6)}}</text>
			</view>
			<view class="public_item">
				<text>报修类型</text>
				<text>{{all?.types}}</text>
			</view>
			<view class="public_item">
				<text>报修位置</text>
				<text>{{all?.address}}</text>
			</view>
			<view class="public_item">
				<text>联系人</text>
				<text>{{all?.repair_applicant}}</text>
			</view>
			<view class="public_item">
				<text>联系电话</text>
				<text>{{all?.phone}}</text>
			</view>
			<view class="public_item">
				<text>维修部门</text>
				<text>{{all.department?.dname}}</text>
			</view>
			<view class="public_item">
				<text>报修时间</text>
				<text>{{all?.create_time}}</text>
			</view>
			<view class="public_item public_describe">
				<text>故障描述</text>
				<text>{{all?.describe}}</text>
			</view>
			<view class="public_item public_photo">
				<text>故障照片</text>
				<view class="images">
					<image :src="items" v-for="(items,indexs) in all?.new_imgs"></image>
				</view>
			</view>
			<view class="public_item">
				<text>评分</text>
				<uni-rate v-model="num"></uni-rate>
			</view>
			<view class="">
				<text>工单历史进度</text>
				<uni-steps :options="list2" active-color="#007AFF" :active="0" direction="column" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		request
	} from '@/unit/request.js'
	import {ref} from 'vue'
	let list2 = [{
		title: '维修员已报完成',
		desc: '2018-11-11'
	}, {
		title: '待评价',
		desc: '2018-11-12'
	}, {
		title: '维修中',
		desc: '2018-11-13',
		
	}, {
		title: '已经接单',
		desc: '2018-11-14'
	}]
	let num=ref(0)
	let all = ref({})
	onLoad((option) => {
		console.log(option);
		// showData.value = option
		// console.log(option, 123);
		request({
			url: "http://42.192.15.126:3000/yan/work_dan?id=" + option._id,
			method: 'GET'
		}).then(item => {
			console.log(item);
			all.value = item.data
			if(item.data.grade_id.grade_num){
				num.value=item.data.grade_id.grade_num
			}else{
				num.value=0
			}
		})
	})
</script>

<style lang="scss">
	.images {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	
		image {
			width: 150rpx;
			height: 150rpx;
		}
	}
	#WorkOrderCompleted {
		height: calc(100vh - 44px);
		padding: 40rpx;
		box-sizing: border-box;
		background-color: #f4f6f9;

		.WorkOrderCompleted_Content {
			height: 100%;
			padding: 20rpx;
			background-color: white;
			position: relative;

			.public_title {
				padding: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.uni-icons {
					width: 90rpx;
					height: 100rpx;
					border-radius: 10rpx;
					background-color: #4a73ff;
					color: white !important;
					font-size: 80rpx !important;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 10rpx 10rpx 10rpx #e2e4e7;
					position: absolute;
					top: 0;
					left: 50%;
					transform: translate(-50%,-40%);
				}

				text {
					&:first-child {
						font-size: 32rpx;
						font-weight: 600;
					}

					&:last-child {
						font-size: 25rpx;
						font-weight: 600;
						color: #999999;
					}
				}
			}


			.public_item {
				margin-top: 20rpx;
				padding: 10rpx 40rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: white;
				border-bottom: 1rpx solid #e2e4e7;
				border-top: 1rpx solid #e2e4e7;
			}

			.public_describe {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}

			.public_photo {
				flex-direction: column;
				align-items: flex-start;
			}

			button {
				width: 30%;
				color: white;
				background-color: #3366ff;
				margin-top: 60rpx;
			}
		}
	}
</style>